/*
 * @Description: 全宗操作组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:35:59
 * @LastEditTime: 2022-09-05 18:22:29
 */

import { Button, Space } from 'antd';
import { useOrgAndUserContext } from '../contexts/OrgAndUserContext';
import { useMemo, useState } from 'react';
import EditDepartmentDialog from '@/view/userRight/OrgAndUser/components/dialogs/EditDepartmentDialog';
import AddDepartmentDialog from '@/view/userRight/OrgAndUser/components/dialogs/AddDepartmentDialog';

const Operate = () => {
  const { selectDepartment, deleteDepartmentFunc } = useOrgAndUserContext();

  // 增加部门弹窗可视状态
  const [addDeptVisible, setAddDeptVisible] = useState(false);
  // 编辑部门弹窗可视状态
  const [editDeptVisible, setEditDeptVisible] = useState(false);

  return (
    <div className="filter-container">
      <p className="page-title">组织与用户管理</p>
      <Space size="small">
        <Button
          disabled={!selectDepartment.id}
          onClick={() => deleteDepartmentFunc(selectDepartment.id)}
        >
          删除部门
        </Button>
        <Button disabled={!selectDepartment.id} onClick={() => setEditDeptVisible(true)}>
          修改部门
        </Button>
        <Button type="primary" onClick={() => setAddDeptVisible(true)}>
          创建部门
        </Button>
      </Space>
      {useMemo(
        () => (
          <AddDepartmentDialog
            visible={addDeptVisible}
            onClose={() => {
              setAddDeptVisible(false);
            }}
          />
        ),
        [addDeptVisible]
      )}
      {useMemo(
        () => (
          <EditDepartmentDialog
            data={selectDepartment}
            visible={editDeptVisible}
            onClose={() => {
              setEditDeptVisible(false);
            }}
          />
        ),
        [editDeptVisible]
      )}
    </div>
  );
};

export default Operate;
